<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高度自适应的九宫格效果</title>
<style>
html, body { height: 100%; margin: 0; }
.page {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
}
.list {
    float: left;
    height: 33.3%; width: 33.3%;
    position: relative;
}
.list:before {
    content: '';
    position: absolute;
    left: 10px; right: 10px; top: 10px; bottom: 10px;
    border-radius: 10px;
    background-color: #cad5eb;
}
.list:after {
    content:attr(data-index);
    position: absolute;
    height: 30px;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    text-align: center;
    font: 24px/30px bold 'microsoft yahei';
}
</style>
</head>

<body>
<div class="page">
    <div class="list" data-index="1"></div>
    <div class="list" data-index="2"></div>
    <div class="list" data-index="3"></div>
    <div class="list" data-index="4"></div>
    <div class="list" data-index="5"></div>
    <div class="list" data-index="6"></div>
    <div class="list" data-index="7"></div>
    <div class="list" data-index="8"></div>
    <div class="list" data-index="9"></div>
</div>
</body>
</html>